<template>
	<div class="up-main section-ge">			
		<div v-for="(item, index) in opt" :class="[{'on': index == quotaType -1 && isClick}, 'up-item ge-item']" @click="chooseType({name: item.name, quotaType: index+1}, index)">
			<p class="sum">{{numFormat(item.value)}}</p>
			<p v-if="parseInt (item.diff) > 0" class="up">&nbsp;&nbsp;<i class="icon icon-shangsheng"></i>{{numFormat(item.diff)}}</p>
			<p v-else class="down"><i class="icon icon-xiajiang"></i>{{numFormat(item.diff.match('%') ? item.diff : Math.abs(item.diff))}}</p>
			<p class="up-des">{{item.name}}</p>
		</div>
	</div>
</template>
<script>
/**
 * @param {Array} opt 对象数组
 */
import {numFormat} from '@/utils/index'
export default {
	name: 'dy-up',
	data () {	
		return {	
			numFormat: numFormat,
		}
	},
	props: {
		opt: Array,
		isClick: {
			type: Boolean,
			default () {
				return true
			}
		}
	},
	computed: {
		quotaType () {
			return this.$store.getters.nowTitle.quotaType ? this.$store.getters.nowTitle.quotaType : 1
		},
	},	
	methods: {
		chooseType (nowTitle, index) {
			if(this.quotaType -1 == index || !this.isClick) return;
			this.$store.commit('nowTitle', nowTitle) 		
		}
	}
}
</script>
<style lang="less" scope>
@import '../assets/less/base.less';
.up-main {
	display: -webkit-flex;
	display: flex;

	.up-item {
		flex: 1;
		box-sizing: border-box;
		width: 100%; 
		padding: .6rem 0;

		&.on {
			background: @on-bg;
		}

		&>p {
			&.sum {
				font-weight: bold;
				font-size: .8rem;
			}

			&.up {
				color: @up;
				font-size: .7rem;
			}

			&.down {
				color: @down;
				font-size: .7rem;
			}

			color: @h1-color;
			text-align: center;
			font-size: .55rem;
			line-height: 1.2rem;
		}

		i {			
			position: relative;
			font-size: .6rem;	

			&:before {
				position: absolute;
				right: 0;
			}
		}

		.up-des {
			color: @font-color;
		}
	}
}
</style>
